<template>
    <div class="store-collections">
        <store-empty description="暂无分类" v-if="collectionsEmpty"/>
        <van-cell v-for="collection in collections"
                  class="store-collection"
                  :key="collection.id" :title="collection.name" :border="false" is-link
                  @click.stop="handleRouteToStoreProducts(collection.id)"
                  v-else/>
    </div>
</template>

<script>
  import _ from "lodash"
  import { store } from "@mall/api-services"
  import { Cell } from "vant"
  import StoreEmpty from "@/views/store/StoreEmpty"

  export default {
    name: "StoreCollections",
    components: {
      StoreEmpty,
      [Cell.name]: Cell,
    },
    props: {
      id: String,
    },
    computed: {
      collectionsEmpty() {
        return _.isEmpty(this.collections)
      },
    },
    data() {
      return {
        collections: [],
      }
    },
    created() {
      this.refreshCollections()
    },
    methods: {
      handleRouteToStoreProducts(collectionId) {
        const { id } = this
        this.$router.push({
          path: `/stores/${id}/products`,
          query: {
            collections: collectionId,
          },
        })
      },
      refreshCollections() {
        const { id } = this
        if (_.isUndefined(id)) {
          return
        }
        store.CollectionServiceV1.getCollections(id)
          .then(aCollections => this.collections = aCollections)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .store-collections {
        .store-collection {
            margin-bottom: 9px;
            font-weight: 700;
            border-radius: 6px;
        }
    }
</style>
